<template>
    <view class="content">
        <swiper class="card-swiper" previous-margin="45rpx" next-margin="45rpx" @change="changeCard">
            <swiper-item v-for="(item, index) in cardList" :key="item.id">
                <view :class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']">
                    <image class="card-bg" :src="item.caroLogo" mode="aspectFill"></image>
                    <text class="card-title">{{ item.cardName }}</text>
                    <text class="card-tip">{{ item.days }}</text>
                    <text class="card-price">{{ item.sellPrice }}</text>
                </view>
            </swiper-item>
        </swiper>
		
		<view class="acc-pri">
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>一星</text>
				</view>
				<view class="acc-pri-tit">会员级别</view>
			</view>
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>300</text>
				</view>
				<view class="acc-pri-tit">服务时长(h)</view>
			</view>
			<view class="acc-pri-con">
				<view class="acc-pri-num">
					<text>30</text>
				</view>
				<view class="acc-pri-tit">加钟率(%)</view>
			</view>
		</view>
		
    </view>
</template>
<script>
    export default {
        data() {
            return {
                cardList: [{
                    id: 1,
                    caroLogo: '../../static/m1.jpg', // 卡片背景图地址
                    cardName: '一星',
                    days:'服务时长小于500小时' ,
                    sellPrice:'加钟率小于2%'
                }, {
                    id: 2,
                    caroLogo: '../../static/m2.jpg',
                    cardName: '二星',
                    days:'服务时长小于1000小时' ,
                    sellPrice:'加钟率小于5%'
                }, {
                    id: 3,
                    caroLogo: '../../static/m3.jpg',
                    cardName: '三星',
                    days:'服务时长小于1500小时' ,
                    sellPrice:'加钟率小于7%'
                }, {
                    id: 4,
                    caroLogo: '../../static/m4.jpg',
                    cardName: '四星',
                    days:'服务时长小于2000小时' ,
                    sellPrice:'加钟率小于8%'
                }, {
                    id: 5,
                    caroLogo: '../../static/m5.jpg',
                    cardName: '五星',
                    days:'服务时长小于5000小时' ,
                    sellPrice:'加钟率小于10%'
                }],
                currentCardIndex: 0
            }
        },
        methods: {
            changeCard(e) {
                this.currentCardIndex = e.detail.current
            }
        }
    }
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
        display: flex;
        flex-direction: column;
        view, text, image{
            box-sizing: border-box;
        }
		.acc-pri{
			margin: 30rpx;
			display: flex;
			background-color: #fff;
			padding:30rpx 0;
			border-radius: 20rpx;
			.acc-pri-con{
				flex: 1;
				text-align: center;
				&:first-child{
					border-right: 2rpx solid  $uni-bg-color-grey;
				}
				.acc-pri-num{
					text{
						font-size: 40rpx;
					}
				}
				.acc-pri-tit{
					margin-top:10rpx;
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}
			}
		}
        .card-swiper {
			margin: 30rpx 0;
            width:100%;
            height:350rpx; // 轮播图片的高度
            background: #FAFAFA;
            .card-item {
                transition: transform 0.3s; // 缩放动画播放 0.3S
                border-radius: 10rpx;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                padding: 26rpx 36rpx 0;
                color: #FFFFFF;
                position: relative;
                .card-bg {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
					border-radius: 20rpx;
					z-index: -1;
                }
                .card-title {
                    font-size:50rpx;
                    font-weight: bold;
					margin:20rpx 0 60rpx 100rpx;
                }
                .card-tip {
                    font-size: 22rpx;
					line-height:60rpx;
					margin-left: 20rpx;
                }
                .card-price {
					font-size: 22rpx;
					line-height:60rpx;
					margin-left: 20rpx;
                }
            }
            .card-item-default {
                transform: scale(0.96, 0.96) translateY(50rpx); // 缩小到原来的 0.96，并沿Y轴向下移动 50rpx
            }
        }
        .card-box {
            z-index: 1;
            background: #FAFAFA;
            box-shadow: 0 0 69rpx 7rpx rgba(0, 0, 0, 0.29);
            border-radius: 30rpx 30rpx 0rpx 0rpx;
            margin-top: -20rpx; // 向上遮住部分轮播卡片
            min-height: 200rpx;
        }
    }
</style>